
<template>
  <div v-loading="loading" class="gl_contentBox gl_heightFull">
    <el-row :gutter="20" class="gl_pb_10">
      <el-col :span="24">
        当前选定单位：
        <span>{{ $route.query.disname ? $route.query.disname + '-' : '' }}</span>
        <span>{{ $route.query.currentTreeData ? $route.query.currentTreeData : '' }}</span>
      </el-col>
    </el-row>
    <p class="gl_ft_weight">数据详情</p>
    <p class="line" />
    <div class="nav">
      <div class="left">
        <div class="left_text" style=" background-color: #108EE9">
          <p>赛事数据</p>
        </div>
        <div class="right_nav" style="border:1px solid  #108EE9">
          <div class="right_text">
            <div class="nav_text">
              <div>{{ game.competitionsCount }}</div>
              <div>创建赛事(次)</div>
            </div>
            <div class="nav_text">
              <div>{{ game.delegationsCount }}</div>
              <div>参与机构(个)</div>
            </div>
            <div class="nav_text">
              <div>{{ game.registersCount }}</div>
              <div>参加人数(人)</div>
            </div>
            <div class="nav_text">
              <div>{{ game.competitionRegistersCount }}</div>
              <div>参加人次(次)</div>
            </div>
          </div>

          <div class="right_red">
            <div class="nav_text text_color">
              <div>{{ amount.CompetitionOrder ? formatMoney(amount.CompetitionOrder.amount) : '' }}</div>
              <div>赛事总额(元)</div>
            </div>
            <div class="nav_text text_color">
              <div>{{ amount.CompetitionLogisticsOrder ? formatMoney(amount.CompetitionLogisticsOrder.amount) : '' }}</div>
              <div>后勤总额(元)</div>
            </div>
          </div>

        </div>
      </div>
      <div class="right">
        <div class="left_text" style=" background-color: rgba(244,71,113,1);">
          <p>培训数据</p>
        </div>
        <div class="right_nav" style="border:1px solid  rgba(244,71,113,1)">
          <div class="right_text">
            <div class="nav_text">
              <div>{{ train.trainingsCount }}</div>
              <div>创建培训(次)</div>
            </div>
            <div class="nav_text">
              <div>{{ train.registersCount }}</div>
              <div>参加人数(人)</div>
            </div>
            <div class="nav_text">
              <div>{{ train.trainingRegistersCount }}</div>
              <div>参加人次(次)</div>
            </div>
          </div>
          <div class="right_red">
            <div class="nav_text text_color">
              <div>{{ amount.TrainingOrder ? formatMoney(amount.TrainingOrder.amount) : '' }}</div>
              <div>培训总额(元)</div>
            </div>
            <div class="nav_text text_color">
              <div>{{ amount.TrainingLogisticsOrder ? formatMoney(amount.TrainingLogisticsOrder.amount) : '' }}</div>
              <div>后勤总额(元)</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="nav">
      <div class="left">
        <div class="left_text" style=" background-color: rgba(255,154,62,1)">
          <p>商城数据</p>
        </div>
        <div class="right_nav" style="border:1px solid  rgba(255,154,62,1)">
          <div class="right_text">
            <div class="nav_text">
              <div>{{ mall.productCount }}</div>
              <div>上架商品(个)</div>
            </div>
          </div>
          <div class="right_red">
            <div class="nav_text text_color">
              <div>{{ amount.MallOrder ? formatMoney(amount.MallOrder.amount) : '' }}</div>
              <div>流水总额(元)</div>
            </div>
          </div>

        </div>

      </div>
      <div v-if="typeCode === 'WXCenter'" class="right">
        <div class="left_text" style=" background-color: rgba(51,42,124,1);">
          <p>人气数据</p>
        </div>
        <div class="right_nav" style="border:1px solid  rgba(51,42,124,1)">
          <div class="right_text">
            <div class="nav_text">
              <div>{{ gift.giftCount }}</div>
              <div>上架道具(个)</div>

            </div>
          </div>
          <div class="right_red">
            <div class="nav_text text_color">
              <div>{{ amount.VoteOrder ? formatMoney(amount.VoteOrder.amount) : '' }}</div>
              <div>流水总额(元)</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div v-if="typeCode === 'WXCenter'" class="nav">
      <div class="left">
        <div class="left_text" style=" background-color: rgba(244,71,113,1)">
          <p class="Dan">道馆系统</p>
        </div>
        <div class="right_nav" style="border:1px solid  rgba(244,71,113,1)">
          <div class="right_text">
            <div class="nav_text">
              <div>{{ clubSys.editionCount }}</div>
              <div>在售版本(个)</div>
            </div>
          </div>
          <div class="right_red">
            <div class="nav_text text_color">
              <div>{{ amount.SystemOrder ? formatMoney(amount.SystemOrder.incomeAmount) : '' }}</div>
              <div>流水总额(元)</div>
            </div>
          </div>
        </div>
      </div>
      <div class="right">
        <div class="left_text" style=" background-color: #DF1A1A">
          <p class="Member">经销商</p>
        </div>
        <div class="right_nav" style="border:1px solid  #DF1A1A">
          <div class="right_text">
            <div class="nav_text">
              <div>{{ 0 }}</div>
              <div>经销商(个)</div>
            </div>
          </div>
          <div class="right_red">
            <div class="nav_text text_color">
              <div>0.00</div>
              <div>流水总额(元)</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div v-if="typeCode === 'ProvinceTA' || typeCode === 'Club'" class="nav">
      <div class="left">
        <div class="left_text" style=" background-color: rgba(244,71,113,1)">
          <p class="Dan">级段位申报</p>
        </div>
        <div class="right_nav" style="border:1px solid  rgba(244,71,113,1)">
          <div class="right_text">
            <div class="nav_text">
              <div>{{ duan.duanExamsCount }}</div>
              <div>申报场次(场)</div>
            </div>
            <div class="nav_text">
              <div>{{ duan.personCount }}</div>
              <div>申报总人数(人)</div>
            </div>
          </div>
          <div class="right_red">
            <div class="nav_text text_color">
              <div v-if="typeCode === 'ProvinceTA'">{{ amount.DuanExamOrder ? formatMoney(amount.DuanExamOrder.incomeAmount) : '' }}</div>
              <div v-else>{{ amount.DuanExamOrder ? formatMoney(amount.DuanExamOrder.expenditureAmount) : '' }}</div>
              <div>{{ typeCode === 'ProvinceTA' ? '收入' : '支出' }}总额(元)</div>
            </div>
          </div>
        </div>
      </div>
      <div class="right">
        <div class="left_text" style=" background-color: #DF1A1A">
          <p class="Member">会员费</p>
        </div>
        <div class="right_nav" style="border:1px solid  #DF1A1A">
          <div class="right_text">
            <div class="nav_text">
              <div>{{ fee.feeCount }}</div>
              <div>缴纳人数(人)</div>
            </div>
          </div>
          <div class="right_red">
            <div class="nav_text text_color">
              <div v-if="typeCode === 'ProvinceTA'">{{ amount.MemberRenewalOrder ? formatMoney(amount.MemberRenewalOrder.incomeAmount) : '' }}</div>
              <div v-else>{{ amount.MemberRenewalOrder ? formatMoney(amount.MemberRenewalOrder.expenditureAmount) : '' }}</div>
              <div>{{ typeCode === 'ProvinceTA' ? '收入' : '支出' }}总额(元)</div>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import { mapState } from 'vuex';
import {
  api_GET_ClubTAManagementCompetitionStatistic, // 赛事数据
  api_GET_ClubTAManagementTrainingStatistic, // 培训数据
  api_GET_ClubTAManagementCurrentUnitMallStatistic, // 获取该组织下所有商店的商品数量和销售额
  api_GET_ClubTAManagementGiftStatistic, // 获取礼物投票人气数据
  api_GET_ClubTAManagementClubEditionStatistic, // 获取道馆版本数据
  api_GET_ClubTAManagementTADuanExamStatistic, // 获取协会级段位数据
  api_GET_ClubTAManagementTAFeeStatistic, // 获取协会会员费数据
  api_GET_ClubTAManagementAmountStatistic // 获取流水
} from '@/extend/api/hallswaggerApi/app.js';
import {
  CompetitionStatisticDto,
  TATrainingStatisticDto,
  TAClubMallStatisticDto,
  TAGiftStatisticDto,
  TAClubEditionStatisticDto,
  TADuanStatisticDto,
  TAFeeStatisticDto
} from '@/lib/form/hall/swaggerForm';
export default {
  data() {
    return {
      loading: false,
      game: new CompetitionStatisticDto(), // 赛事
      train: new TATrainingStatisticDto(), // 培训
      mall: new TAClubMallStatisticDto(), // 商城
      gift: new TAGiftStatisticDto(), // 人气数据
      clubSys: new TAClubEditionStatisticDto(), // 道馆版本
      duan: new TADuanStatisticDto(), // 级段位
      fee: new TAFeeStatisticDto(), // 会员费
      amountData: [],
      amount: {}
    };
  },
  computed: {
    ...mapState({
      typeCode: state => state.user.info.currentOrganizationUnit.typeCode
    })
  },
  created() {
    this.loading = true;
    Promise.all([
      this.getGameData(),
      this.getTrainData(),
      this.getMallData(),
      this.getGiftData(),
      this.getClubSysData(),
      this.getDuanData(),
      this.getFeeData(),
      this.getAmount()
    ]).then(() => {
      this.loading = false;
    }, () => {
      this.loading = false;
    });
  },
  methods: {
    // 获取赛事数据
    getGameData() {
      return new Promise((resolve, reject) => {
        api_GET_ClubTAManagementCompetitionStatistic({ OrganizationUnitId: this.$route.query.organizationUnitId }).then(res => {
          this.game = res || this.game;
          resolve(res);
        }, (error) => {
          this.$message({ type: 'error', message: error.error.message || error.message });
          reject(error);
        });
      });
    },
    // 获取培训数据
    getTrainData() {
      return new Promise((resolve, reject) => {
        api_GET_ClubTAManagementTrainingStatistic({ OrganizationUnitId: this.$route.query.organizationUnitId }).then(res => {
          this.train = res || this.train;
          resolve(res);
        }, (error) => {
          this.$message({ type: 'error', message: error.error.message || error.message });
          reject(error);
        });
      });
    },
    // 获取商城数据
    getMallData() {
      return new Promise((resolve, reject) => {
        api_GET_ClubTAManagementCurrentUnitMallStatistic().then(res => {
          this.mall = res || this.mall;
          resolve(res);
        }, (error) => {
          this.$message({ type: 'error', message: error.error.message || error.message });
          reject(error);
        });
      });
    },
    // 获取人气数据
    getGiftData() {
      return new Promise((resolve, reject) => {
        if (this.typeCode !== 'WXCenter') {
          reject('');
          return;
        }
        api_GET_ClubTAManagementGiftStatistic().then(res => {
          this.gift = res || this.gift;
          resolve(res);
        }, (error) => {
          this.$message({ type: 'error', message: error.error.message || error.message });
          reject(error);
        });
      });
    },
    // 获取道馆版本数据
    getClubSysData() {
      return new Promise((resolve, reject) => {
        if (this.typeCode !== 'WXCenter') {
          reject('');
          return;
        }
        api_GET_ClubTAManagementClubEditionStatistic().then(res => {
          this.clubSys = res || this.clubSys;
          resolve(res);
        }, (error) => {
          this.$message({ type: 'error', message: error.error.message || error.message });
          reject(error);
        });
      });
    },
    // 获取级段位数据
    getDuanData() {
      return new Promise((resolve, reject) => {
        if (this.typeCode !== 'ProvinceTA' && this.typeCode !== 'Club') {
          reject('');
          return;
        }
        api_GET_ClubTAManagementTADuanExamStatistic().then(res => {
          this.duan = res || this.duan;
          resolve(res);
        }, (error) => {
          this.$message({ type: 'error', message: error.error.message || error.message });
          reject(error);
        });
      });
    },
    // 获取会员费数据
    getFeeData() {
      return new Promise((resolve, reject) => {
        if (this.typeCode !== 'ProvinceTA' && this.typeCode !== 'Club') {
          reject('');
          return;
        }
        api_GET_ClubTAManagementTAFeeStatistic().then(res => {
          this.fee = res || this.fee;
          resolve(res);
        }, (error) => {
          this.$message({ type: 'error', message: error.error.message || error.message });
          reject(error);
        });
      });
    },
    // 获取流水
    getAmount() {
      const that = this;
      return new Promise((resolve, reject) => {
        api_GET_ClubTAManagementAmountStatistic({ OrganizationUnitId: this.$route.query.organizationUnitId }).then(res => {
          if (res) {
            that.amountData = res.orderTypeAmounts;
            that.amountData.map(item => {
              const type = item.orderTypeCode;
              if (type !== 'LogisticsOrder') {
                that.$set(that.amount, type, item);
              } else {
                that.$set(that.amount, item.businessTypeCode + type, item);
              }
              // if (!that.amount[type]) {
              //   if (type !== 'LogisticsOrder')
              //   that.$set(that.amount, type, item);
              // } else if(type === '')
              // that.$set(that.amount[type], item.orderTypeCode, item);
            });
          }
          console.log(that.amount);
          resolve(res);
        }, (error) => {
          this.$message({ type: 'error', message: error.error.message || error.message });
          reject(error);
        });
      });
    },
    // 格式化货币格式 （分）
    formatMoney(num) {
      if (typeof num === 'number' && !Number.isNaN(num)) {
        // num 是数字类型 且不是 NaN
        let strNum = String(num); // 金额文本类型
        if (num >= 0) {
          strNum = strNum.padStart(3, '0'); // 用0填充保证最小三位数
          return strNum.slice(0, -2) + '.' + strNum.slice(-2); // 金额拼接
        } else {
          const _mark = strNum.slice(0, 1); // 负号
          const _noMark = strNum.slice(1); // 无负号数值
          strNum = _noMark.padStart(3, '0'); // 用0填充保证最小三位数
          return _mark + strNum.slice(0, -2) + '.' + strNum.slice(-2); // 金额拼接
        }
      } else {
        return '';
      }
    }
  }

};
</script>

<style lang="scss" scoped>
.right_red {
  display: flex;
  align-items: center;
}
.right_nav {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  padding-right: 16px;
}
.line{
    height: 1px;
    width: 100%;
    background-color:  rgba(0, 0, 0, 0.09);
    margin-top: 15px;
    margin-bottom: 15px;
}
.nav {
    margin-bottom: 20px;
}
.left {
  margin-bottom: 20px;
}
.nav>div{
    height: 80px;
    display: flex;
}
.left_text {
    width: 80px;
    color: white;
    text-align: center;
    height: 100%;
    font-size: 14px;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
}
.left_text>p {
width: 41px;
padding-top: 6px;
}
.left_text .Dan {
  width: 45px;

}

.left_text .Member {
  width: 45px;

}
.left_text>p>span{
    display: inline-block;
    margin-bottom: 6px;
}
.right_text {
    flex: 1;
    display: flex;
    align-items: center;
    padding-left: 40px;

}
.nav_text {
    min-width: 56px;
    font-size: 20px;
    margin-right: 60px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.nav_text div:nth-of-type(2){
color:rgba(0,0,0,0.65);
font-size: 12px;
margin-top: 4px;
}
.nav_text div:nth-of-type(1){
width: 100%;
}
.text_color {
    float: left;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    margin-right: 0px;
    margin-left: 40px;
}
.text_color div:nth-of-type(1) {
    color: rgba(255,0,0,0.85);
    font-weight: bold;
    font-size: 20px;
    height: 23px;
}

</style>
